<template>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="/">基础数据</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>管理员设置</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索区 -->
    <div style="height: 120px; padding: 10px; margin-top: 10px; border: 1px black solid;">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="部门名称">
                <el-input v-model="searchForm.DepartName" placeholder="部门名称" clearable />
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="searchForm.AccountNickname" placeholder="名称" clearable />
            </el-form-item>
            <br>
            <el-form-item>
                <el-button type="primary" @click="search">查询</el-button> <el-button type="danger"
                    @click="resetSearch">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div style="height: 580px; padding: 10px; margin-top: 10px; border: 1px black solid;">
        <el-button type="success" @click="openDialog(null)">添加</el-button>
        <el-table :data="tableData" style="width: 100%; margin-top: 10px;">
            <el-table-column prop="id" label="账号编号" width="160" />
            <el-table-column prop="accountName" label="账号" width="160" />
            <el-table-column prop="accountNickname" label="姓名" width="120" />
            <el-table-column prop="accountPhone" label="联系电话" width="120" />
            <el-table-column prop="accountCard" label="身份证号" width="280" />
            <el-table-column prop="roleName" label="角色" width="120" />
            <el-table-column prop="departmentName" label="所属部门" width="280" />
            <el-table-column fixed="right" label="操作" min-width="150">
                <template v-slot="rowdata">
                    <el-button type="danger" size="small" @click='delData(rowdata.row)'
                        v-if="rowdata.row.roleName != '系统管理员'">
                        删除
                    </el-button>
                    <el-button type="primary" size="small" v-if="rowdata.row.roleName != '系统管理员'">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <el-dialog v-model="form.isOpen" title="新增管理员" width="720" align-center draggable>
        <el-form :model="form" >
            <el-form-item label="部门名称">
                <el-cascader v-model="form.departmentId" :options="cascaders" :props="props" @change="onCascaderChange"
                    style="width: 100%;" clearable :disabled="form.disabled" />
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="form.accountNickname" placeholder="姓名" />
            </el-form-item>
            <el-form-item label="身份证号">
                <el-input v-model="form.accountCard" placeholder="默认后6位为登录密码" />
            </el-form-item>
            <el-form-item label="联系方式">
                <el-input v-model="form.accountPhone" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="账号">
                <el-input v-model="form.accountName" placeholder="默认手机号" />
            </el-form-item>
            <el-form-item label="角色">
                <el-text style="font-weight: bold;">系统管理员</el-text>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="form.isOpen = false">取消</el-button>
                <el-button type="primary" @click="saveData">确定</el-button>
            </div>
        </template>
    </el-dialog>

</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';

const form = reactive({
    isOpen: false,
    loading: false,

    accountName: '',
    accountPass: "",
    accountNickname: '',
    accountPhone: '',
    accountCard: '',
    roleId: 0,
    departmentId: 0,

    loginName: sessionStorage.getItem('loginName'),

    //控件禁用
    disabled: false,
    isAdd: true
});
const currentRow = ref({})//当前选中行,用于编辑数据
const openDialog = (row: any) => {
    form.isOpen = true;
    setCascaders()
    if (row == null) {
        //新增打开对话框
    } else {
        //反填数据
        form.departmentId = row.departmentId
        form.accountNickname = row.accountNickname
        form.accountCard = row.accountCard
        form.accountPhone = row.accountPhone
        form.accountName = row.accountName
        //禁用控件
        form.disabled = true
        //编辑操作
        form.isAdd = false
        //当前行
        currentRow.value = row
    }

}
//级联选择器的数据对象
const cascaders = ref<any>([])
const setCascaders = () => {//从接口中拉取树形结构的数据,绑定给级联选择器的数据对象
    axios.get("https://localhost:7016/api/DepartMent/GetDepartmentTree").then(res => {
        cascaders.value = res.data.data;
    })
}
const props={//级联选择器属性设置
    value:'id',
    label:'departmentName',
    children:'childs'
}
//级联选择器绑定值发生变化时
const onCascaderChange = (value: any) => {
    console.log(value);
    form.departmentId = value[value.length - 1]
    alert(form.departmentId)
}
//对话框表单保存
const saveData=()=>{
     if(form.isAdd){
        //
        form.accountPass=form.accountCard.substring(12,18)
        if(form.accountName==""){
            form.accountName=form.accountPhone
        }
        axios.post("https://localhost:7079/api/Account/CreateAccount",form).then(res=>{

            console.log(res);
            if(res.data.code==200){
                ElMessage.success(res.data.msg)
                form.isOpen = false
                getData()
            }else{
                ElMessage.error(res.data.msg)
            }
        })
     }else{
        currentRow.value.accountCard=form.accountCard;
        currentRow.value.accountName= form.accountName;
        currentRow.value.accountPass= form.accountPass;
         //账号如果为空，默认是手机号
         if (form.accountName == "") {
            currentRow.value.accountName = form.accountPhone
        }
        axios.put('').then((res)=>{
            console.log(res)
        })


     }
}

//定义表格数据对象
const tableData = ref([])
//获取账号列表赋值给 tableData
const getData = () => {
    axios.get('https://localhost:7016/api/Account/GetAccountsWithDepart', { params: searchForm }).then((res) => {
        console.log(res.data.data)
        tableData.value = res.data.data
    })
}

const searchForm = reactive({
    DepartName: '',
    AccountNickname: ''
})
//重置
const resetSearch = () => {
    console.log('resetSearch!')
    searchForm.AccountNickname = '';
    searchForm.DepartName = '';

}

//查询
const search = () => {
    console.log('submit!')
    getData();
}

//删除
const delData = (row: any) => {
    ElMessageBox.confirm('确认要删除该账号吗?', '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        row.loginName = sessionStorage.getItem('loginName')
        console.log(row)
        axios.put('https://localhost:7079/api/Account/DelAccount', row).then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.msg);
                getData()
            }
        })
    })
}

//添加
const toAdd = () => {

}
onMounted(() => {
    getData();
});
</script>

<style scoped>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>